    <style include="settings-shared search-engine-entry">
      :host([is-default]) .list-item {
        font-weight: 500;
      }

      #name-column {
        align-items: center;
        display: flex;
      }

      #name-column,
      #keyword-column {
        flex: 3;
        word-break: break-word;
      }

      #shortcut-column {
        flex: 4;
        word-break: break-word;
      }

      #keyword-column > div {
        margin-inline-end: 8px;
      }

      #url-column {
        flex: 4;
      }

      #url-column-padded {
        flex: 3;
        margin-inline-end: 40px;
      }
    </style>

    <div class="list-item cr-row" role="row">
      <span role="cell" id="name-column">
        <site-favicon
            favicon-url="[[engine.iconURL]]"
            url="[[engine.url]]">
        </site-favicon>
        <div>[[engine.displayName]]</div>
      </span>
      <span role="cell" id="keyword-column"
          hidden="[[isActiveSearchEnginesFlagEnabled]]">
        <div>[[engine.keyword]]</div>
      </span>
      <span role="cell" id="shortcut-column" hidden="[[!showShortcut]]">
        <div>[[engine.keyword]]</div>
      </span>
      <span role="cell" id="url-column" class="text-elide"
          hidden="[[isActiveSearchEnginesFlagEnabled]]">
        <div>[[engine.url]]</div>
      </span>
      <span role="cell" id="url-column-padded" class="text-elide"
          hidden="[[!showQueryUrl]]">
        <div>[[engine.url]]</div>
      </span>
      <span role="cell">
        <template is="dom-if" if="[[isActiveSearchEnginesFlagEnabled]]">
          <cr-button class="secondary-button" on-click="onActivateTap_"
              hidden="[[!engine.canBeActivated]]" id="activate">
            $i18n{searchEnginesActivate}
          </cr-button>
          <cr-icon-button class="icon-edit" on-click="onEditTap_"
              title="$i18n{edit}" hidden="[[engine.canBeActivated]]"
              disabled$="[[!engine.canBeEdited]]" id="editIconButton">
          </cr-icon-button>
        </template>
        <cr-icon-button class="icon-more-vert" on-click="onDotsTap_"
            disabled$="[[disableMenuButton]]" title="$i18n{moreActions}">
        </cr-icon-button>
        <cr-action-menu role-description="$i18n{menu}">
          <button class="dropdown-item" on-click="onMakeDefaultTap_"
              disabled$="[[!engine.canBeDefault]]" id="makeDefault">
            $i18n{searchEnginesMakeDefault}
          </button>
          <template is="dom-if" if="[[isActiveSearchEnginesFlagEnabled]]">
            <button class="dropdown-item" on-click="onDeactivateTap_"
                hidden="[[!engine.canBeDeactivated]]" id="deactivate">
              $i18n{searchEnginesDeactivate}
            </button>
          </template>
          <button class="dropdown-item" on-click="onEditTap_"
              hidden="[[isActiveSearchEnginesFlagEnabled]]"
              disabled$="[[!engine.canBeEdited]]" id="edit">
            $i18n{edit}
          </button>
          <button class="dropdown-item" on-click="onDeleteTap_"
              hidden="[[!engine.canBeRemoved]]" id="delete">
            $i18n{delete}
          </button>
        </cr-action-menu>
      </span>
    </div>
    <template is="dom-if" if="[[engine.extension]]">
      <extension-controlled-indicator
          extension-id="[[engine.extension.id]]"
          extension-name="[[engine.extension.name]]"
          extension-can-be-disabled="[[engine.extension.canBeDisabled]]">
      </extension-controlled-indicator>
    </template>
